<template>
  <div class="container">
    <el-card shadow>
      <!-- 头部搜索区域 -->
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-form :inline="true" :model="page" ref="searchForm">
            <el-form-item label="学科名称">
              <el-input v-model="page.subjectName" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFind">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col>
          <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" @click="subjectsAdd"
              >新增学科</el-button
            >
          </el-row>
        </el-col>
      </el-row>

      <!-- 工具栏 -->
      <el-alert
        :title="`数据一共${page.counts}条`"
        type="info"
        show-icon
        :closable="false"
      ></el-alert>

      <!-- 表格展示 -->
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#f4f4f5' }"
        style="width: 100%; margin-top: 15px"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope"
            >{{ new Date(scope.row.addDate) | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template slot-scope="scope">
            <span v-if="scope.row.isFrontDisplay === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="210px">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toDirectorys(scope.row)"
              >学科分类</el-button
            >
            <el-button type="text" size="small" @click="toTags(scope.row)"
              >学科标签</el-button
            >
            <el-button
              @click="editHandleClick(scope.row)"
              type="text"
              size="small"
              >修改</el-button
            >
            <el-button
              @click="DeleteHandleClick(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          style="margin-top: 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.pagesize"
          layout="  prev, pager, next,sizes, jumper"
          :total="page.counts"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <!-- 新增/修改学科弹层组件 -->
    <SubjectsAdd
      ref="subjectAddRef"
      @getSubjectsList="getSubjectsList"
      @editSubject="editSubject"
      @addSubject="addSubject"
      :dialogVisible.sync="dialogVisible"
    ></SubjectsAdd>
  </div>
</template>

<script>
import { list, update, add, remove } from '@/api/hmmm/subjects.js'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  components: { SubjectsAdd },
  data () {
    return {
      page: {
        subjectName: '',
        counts: 0, // 总记录数
        page: 1, // 当前页数
        pagesize: 10 // 页大小
      },
      // 展示表单数据
      tableData: [{}],
      dialogVisible: false // 控制弹层展示
    }
  },
  created () {
    this.getSubjectsList()
  },

  methods: {
    // 跳转标签和目录详情
    toTags (row) {
      // console.log(row)
      this.$router.push(
        `/subjects/tags?id=${row.id}&subjectName=${row.subjectName}`
      )
    },
    toDirectorys (row) {
      this.$router.push(
        `/subjects/directorys?id=${row.id}&subjectName=${row.subjectName}`
      )
    },
    // 获取学科列表数据
    async getSubjectsList () {
      // this.page.subjectName = subjectName
      const { data } = await list({ ...this.page })
      // console.log(data)
      this.tableData = data.items
      this.page.counts = data.counts
      this.page.pagesize = data.pagesize - 0
      this.page.page = data.page - 0
    },
    // 搜索 清除
    async search () {
      // const { data } = await list({ ...this.searchForm })
      // this.tableData = data.items
      // this.page.counts = data.counts
      this.getSubjectsList()
    },
    clearFind () {
      this.page.subjectName = ''
    },

    // 新增学科弹层展示
    subjectsAdd () {
      this.dialogVisible = true
    },
    // 添加学科（父子通信）
    async addSubject (editFormDate) {
      const data = await add({ ...editFormDate })
      if (data.status !== 200) {
        return this.$message.error('添加学科失败')
      }
      this.$message.success('添加学科成功')
      this.search()
    },
    // 修改学科弹层展示
    editHandleClick (row) {
      // this.$refs.subjectAddRef.showSubject(row.id)
      this.$refs.subjectAddRef.ruleForm = { ...row }
      this.dialogVisible = true
    },
    // 编辑学科(父子通信)
    async editSubject (editFormDate) {
      // console.log(editFormDate);
      const data = await update({ ...editFormDate })
      if (data.status !== 200) {
        return this.$message.error('修改学科失败')
      }
      this.$message.success('修改学科成功')
      this.search()
    },

    async DeleteHandleClick (row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const data = await remove({ id: row.id })
      if (data.status !== 200) {
        return this.$message.error('删除学科失败！')
      }
      // await this.getSubjectsList()
      this.search()
      this.$message.success('删除学科成功！')
    },

    // 页面变化 条数 页数
    handleSizeChange (val) {
      this.page.pagesize = val
      // this.page.subjectName = this.searchForm.subjectName
      this.getSubjectsList()
      // this.search()
    },
    handleCurrentChange (val) {
      this.page.page = val
      // this.page.subjectName = this.searchForm.subjectName
      this.getSubjectsList()
      // this.search()
    }
  }
}
</script>

<style scoped lang="less"></style>
